<script setup>
	import {
		reactive
	} from 'vue'
	import {
		jumpTo
	} from '@/utils/common'
	import http from '@/api/indexAPI'

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	// import {
	// 	useSocket
	// } from "@/stores/socket"

	// import { useSocket} from "@/utils/client"

	// const client = useSocket();

	const data = reactive({
		current: 0,
		list: [],
	})

	function onChange({
		detail
	}) {
		data.current = detail.current
	}

	async function geTexplain() {
		const res = await http.geTexplain()
		res.data.sort((a, b) => +a.type - +b.type)
		data.list = res.data
	}

	onLoad(async () => {
		await geTexplain()
	});

	onShow(() => {

	})
</script>

<template>
	<view style="height: 20%" />
	<view class="logo">
		<text>IVMCR</text>
		<text class="day"> · 7 DAYS</text>
	</view>
	<view class="nav">
		<text class="day" v-for="(, i) in data.list" :key="i" @click="onChange({ detail: { current: i } })"
			:class="{ isActive: i < 3 && data.current === i, isActive4: data.current === i && i >= 3 }">day{{ i + 1 }}</text>
	</view>
	<swiper class="swiper" :current="data.current" @animationfinish="onChange" indicator-active-color="#606060" circular
		indicator-dots autoplay :interval="3000">
		<swiper-item v-for="(item, i) in data.list" :key="i">
			<text class="s-text" decode>
				{{ item.value }}
			</text>
		</swiper-item>
	</swiper>
	<view class="btn" @click="jumpTo('/pages/room/index?days=0')">
		<text>正式进入\n 你的专属定制室</text>
		<image src="@/static/icon/btn-down.png" mode="aspectFit" />
	</view>

	<!-- <drag-button><view>拖动</view></drag-button> -->
</template>

<style lang="scss" scoped>
	.logo {
		align-self: center;
		width: fit-content;

		>text {
			display: block;
			color: rgb(0, 0, 0);
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			letter-spacing: 10rpx;
			text-align: left;
		}

		.day {
			margin-top: -3rpx;
			letter-spacing: 0;
		}
	}

	.nav {
		margin-top: 56rpx;
		align-self: center;
		width: fit-content;

		.day {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			display: inline-flex;
			justify-content: space-between;
			padding: 16rpx;
			// padding: 0 4rpx;
			color: rgb(0, 0, 0);
			font-size: 20rpx;
			font-weight: 600;
			line-height: 20rpx;
			text-align: center;
			vertical-align: top;

			::before {
				opacity: 0;
				flex-shrink: 0;
				display: inline-block;
				margin-right: 4rpx;
				content: '';
				width: 4rpx;
				height: 34rpx;
				background-color: #000;
				text-align: left;
				vertical-align: top;
				transition: all 0.5s cubic-bezier(0.4, 0.21, 0.68, 0.03);
			}

			::after {
				transition: all 0.5s cubic-bezier(0.4, 0.21, 0.68, 0.03);
				opacity: 0;
				display: inline-block;
				margin-left: 4rpx;
				content: '';
				width: 4rpx;
				height: 34rpx;
				background-color: #000;
				text-align: left;
				vertical-align: top;
				flex-shrink: 0;
			}

			&.isActive {
				font-weight: 700;
				font-size: 18rpx;
			}

			&.isActive {
				::before {
					transition: all 0.8s cubic-bezier(0.4, 0.21, 0.68, 0.03);
					opacity: 1;
				}
			}

			&.isActive4 {
				font-weight: 700;
				font-size: 18rpx;

				::after {
					transition: all 0.8s cubic-bezier(0.4, 0.21, 0.68, 0.03);
					opacity: 1;
				}
			}
		}
	}

	.swiper {
		margin-top: 120rpx;
		align-self: center;
		width: 80%;
		height: 340rpx;

		&:deep(.wx-swiper-dot) {
			width: 8rpx;
			height: 8rpx;
			transform: rotate(45deg);
			border-radius: 0;
			background-color: #cdcdcd;
		}

		:deep(.s-text) {
			display: block;
			color: rgb(0, 0, 0);
			font-size: 20rpx;
			font-weight: 600;
			line-height: 22rpx;
			text-align: center;
		}
	}

	.btn {
		align-self: center;
		margin-top: 90rpx;
		position: relative;
		width: 290rpx;
		height: 90rpx;
		filter: drop-shadow(0px 2rpx 1rpx rgba(0, 0, 0, 0.2));

		>image {
			width: 100%;
			height: 100%;
		}

		>text {
			position: absolute;
			top: 20rpx;
			width: 100%;
			color: rgb(0, 0, 0);
			font-size: 20rpx;
			font-weight: 600;
			line-height: 22rpx;
			text-align: center;
		}
	}
</style>